<template>
<div>
  <div v-show="mapModuleIndex === 0" id="left" />
  <div v-show="mapModuleIndex === 0 || mapModuleIndex === 2" id="right" :class="mapModuleIndex===2 ? 'mapleft' : 'compare-normal'" />
</div>
</template>

<script>
import Compare from './comparable'
import Coordinate from '@/components/map/coordinate'
import CalculateSizeorAltitude from '@/assets/js/utils/CalculateSizeorAltitude'

import { mapState } from 'vuex'
export default {
  name: 'TwoMap',
  components: { Coordinate },
  props: {
    baseLayers: {
      type: Array,
      default: function () {
        return []
      }
    },
    center: {
      type: Array,
      default: function () {
        return [132.41, 47.25]
      }
    }

  },
  data(){
    return{
      leftMap:undefined,
      rightMap:undefined
    }
  },
  mounted() {
  
    this. leftMap = new mapboxgl.Map({
      container: 'left',
      style: {
        version: 8,
        sprite: '',
        glyphs: '',
        sources: {},
        layers: []
      },
      units: 'degree',
      crs: 'EPSG:4490',
      center: this.center,
      zoom:7,
      trackResize: true,
      // maxBounds: this.bounds
    })
    this. rightMap = new mapboxgl.Map({
      container: 'right',
      style: {
        version: 8,
        sprite: '',
        glyphs: '',
        sources: {},
        layers: []
      },
      units: 'degree',
      crs: 'EPSG:4490',
      center: this.center,
      zoom: 8,
      trackResize: true,
      // maxBounds: this.bounds
    })
     this.rightMap.addControl(new Coordinate(), 'bottom-left')
     this.leftMap.addControl(new Coordinate(), 'bottom-left')
     this.rightMap.addControl(new mapboxgl.NavigationControl(), 'bottom-right')
     this.leftMap.addControl(new mapboxgl.NavigationControl(), 'bottom-right')
    this. rightMap.addControl(new mapboxgl.ScaleControl({}))
     this.leftMap.addControl(new mapboxgl.ScaleControl({}))
    const compare = new Compare( this.leftMap,  this.rightMap)
    compare.setMode(2)
   
    this.$emit('oneMapInstanceComplete',  this.leftMap,  this.rightMap, compare)

     this.rightMap.on('mouseover', e => {
      this.relateMap = false
    })
     this.rightMap.on('zoomend', e => {
      this.setExtentChangeSource()
    })
     this.rightMap.on('dragend', e => {
      this.setExtentChangeSource()
    })
     this.rightMap.on('pitchend', e => {
      this.setExtentChangeSource()
    })
  },
  methods: {
    /**
     * 设置地图范围参数
     */
     setExtentChangeSource() {
      if (this.relateMap) {
        return
      }
      const maps =  this.rightMap;
      const mapBounds = maps.getBounds()
      const centerx = (mapBounds.getWest() + mapBounds.getEast()) / 2
      const centery = (mapBounds.getNorth() + mapBounds.getSouth()) / 2
      const width = Math.abs(mapBounds.getWest() - mapBounds.getEast())
      const altitude = CalculateSizeorAltitude.CalculateAltitudeFromBounds(
        width
      )

      const source = {
        type: '2d',
        extent: {
          x: centerx,
          y: centery,
          h: altitude
        }
      }
      this.$store.commit('eswyzt/setExtentChangeSourceMap', source)
    }
  },
  computed: {
    ...mapState({
      // 地图模块控件
      mapModuleIndex(state) {
        return state.eswyzt.mapModuleIndex
      },

      // 地图范围参数
      extentChangeScene(state) {
        return state.eswyzt.extentChangeScene;
      },

      extentChangeSourceScene(state) {
        return state.eswyzt.extentChangeSourceScene
      },
      mapService(state) {
        return state.eswyzt.mapService
      },
      bounds(state) {
        return state.user.bounds
      }
    })
  },
  watch: {
    /**
     * 监视地图范围参数
     * @param val
     */
    async extentChangeSourceScene(val) {
      const maps = await this.rightMap
      if (val === null) {
        return
      }
      if (maps[1] === null) {
        return
      }
      if (val.type === '3d') {
        this.relateMap = true
        if (typeof val.bounds.xmin === 'undefined') {
          maps.flyTo({
            center: [val.center.lon, val.center.lat],
            zoom: 5,
            speed: 0.2,
            curve: 1
          })
        } else {
          const bbox = [
            [val.bounds.xmin, val.bounds.ymax],
            [val.bounds.xmax, val.bounds.ymin]
          ]
          maps.fitBounds(bbox)
        }
      }
    }
  }
}
</script>

<style>
/* #left {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  #right{
    position: absolute;
    width: 100%;
    height: 100%;
  } */

.mapleft {
  position: absolute;
  width: 50%;
  height: 100%;
}

.mapfull {
  width: 100%;
  height: 100%;
}
 .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
   margin: 0 15px 110px 0;
   float: right;
 }
</style>
